<template>
	<div>
		<!-- <button v-on:click="send">发送</button> -->
		<Header>
			<h1>推荐文章</h1>
			<p>Termux 高级终端安装使用配置教程
	Termux 高级终端安装使用配置教程，刚写这篇文章的时候，当时国内 Termux 相关的文章和资料相对来说还是比较少的，就花了几天写了这一篇文章，没想</p>
			<br>
			<button id="getData" v-on:click="getArticleList" style="width:200px;height:60px;">获取内容</button>
		</Header>
		<Content>
			<div class="card_content">
				<div class="article protrusion" v-for="val in cards" v-bind:key="val.id">
					<div class="card">
						<div class="card_image">
							<router-link v-bind:to="val.ahref" style="color: #EEEEEE;">
								<img v-bind:src="`data:image/gif;base64,${val.cover}`" class="responsive_img">
								<span class="card_title">{{val.title}}</span>
							</router-link>
						</div>
						<div class="summary">
							<div class="summary_text">
								{{val.content}}
							</div>
							<div>
								<span>{{val.releasetime}}</span>
								<span class="card_category" style="float: right;">{{val.categoryname}}</span>
							</div>
						</div>
						<div class="article_tags">
							<router-link to="" v-for="(val,key) in val.tags" v-bind:key="key">{{val}}</router-link>
						</div>
					</div>
				</div>
			</div>
		</Content>
	</div>
</template>

<script>
import Header from './Header.vue'
import Content from './Content.vue'

export default {
	name: 'Home',
	components: {
		Header,
		Content,
	},
	data: function() {
		return {
			cards: [],
		}
	},
	methods: {
		getArticleList: function() {
			fetch(this.url+"/article/articlelist",{
				method: "POST",
				headers: {"Content-Type": "application/x-www-form-urlencoded"}
			})
			.then((res) => {return res.text()})
			.then((res) => {
				res = JSON.parse(res)["data"]
				for (let i in res) {
					res[i].ahref = "/detail/"+res[i]["releasetime"].trim().split(" ")[0].replaceAll("-","/")+"/"+res[i]["aid"]
					res[i].tags = res[i]["tags"].split(",")
				}
				this.cards = res
			})
		}
	},
	mounted() {
		var getButton = document.getElementById("getData")
		getButton.addEventListener("click",()=>{this.toast("好的~",2000)})
	}
}
</script>

<style scoped>
	.card_content {
		position: relative;
		width: 90%;
		max-width: 1125px;
		margin: 0 auto;
		border: 1px solid #AAAAAA;
		border-radius: 5px 5px 5px 5px;
		overflow: hidden;
		color: #EEEEEE;
	}
	.article {
		float: left;
		width: 100%;
		padding: 0 0.75rem;
	}
	.card {
		margin: 0.5rem 0 1rem 0;
		border-radius: 8px;
		background-color: #282c34;
		box-shadow: 0 15px 35px rgb(50 50 93 / 10%), 0 5px 15px rgb(0 0 0 / 7%);
		transition: all 0.5s;
	}
	.card_image {
		position: relative;
	}
	.responsive_img {
		display: block;
		height: 220px;
		width: 100%;
		border-radius: 8px 8px 0 0;
		/* 亮度 */
		filter: brightness(.7);
		/* 不透明度 */
		opacity: .7;
		/* 保留图片原始比例 */
		object-fit: cover;
	}
	.card_title {
		position: absolute;
		bottom: 0;
		left: 0;
		font-size: 24px;
		font-weight: 300;
		padding: 24px;
	}
	.summary {
		padding: 15px 15px 12px 18px;
	}
	.summary_text {
		overflow: hidden;
		line-height: 1.5em;
		max-height: 3em;
	}
	.article_tags {
		padding: 10px 15px 10px 18px;
		border-top: 1px solid rgba(160,160,160,0.2);
		border-radius: 0 0 8px 8px;
	}
	.article_tags a {
		margin-right: 5px;
		padding: 0 12px;
		height: 25px;
		line-height: 25px;
		color: #fff;
		border-radius: 10px;
		background-image: linear-gradient(to left, #00c9ff 0%, #66a6ff 100%);
	}
	@media only screen and (min-width: 600px) {
		.article {
			width: 50%;
		}
	}
	@media only screen and (min-width: 900px) {
		.article {
			width: 33.3333333333%;
		}
	}
</style>
